<script setup>
import { ref, onMounted, h, nextTick } from 'vue'
import { Select, Button, Input, Modal, Spin, message } from 'ant-design-vue'
import { SettingOutlined, DownloadOutlined } from '@ant-design/icons-vue'
import { getModelList, generateHTMLStream, isThinkingModel, updateApiConfig } from './services/apiService.js'
import ConfigModal from './components/ConfigModal.vue'
import MatrixBackground from './components/MatrixBackground.vue'
import ThinkingModal from './components/ThinkingModal.vue'
import { DEFAULT_SYSTEM_PROMPT } from './prompt/prompt.js'

// Reactive data
const models = ref([])
const selectedModel = ref('')
const userPrompt = ref('')
const systemPrompt = ref('')
const htmlCode = ref('')
const isGenerating = ref(false)
const thinkingContent = ref('')
const showThinking = ref(false)
const isStreamingComplete = ref(false)
const showThinkingModal = ref(false)
const isThinking = ref(false)
const showConfig = ref(false)
const showApiKeyWarning = ref(false)
const apiConfig = ref({
  baseUrl: 'http://localhost:3001/v1',
  apiToken: '9643f8c461f85e668198ec406e476d0bae85cf4d',
  modelListUrl: '/models'
})



// Dynamic height control
const leftPanelWidth = ref(50) // percentage
const isDragging = ref(false)

// Get model list
const fetchModels = async () => {
  try {
    // 检查API密钥是否为默认占位符
    if (apiConfig.value.apiToken === 'your-openai-api-key-here' || !apiConfig.value.apiToken) {
      console.warn('Please configure your OpenAI API key in settings')
      showApiKeyWarning.value = true
      return
    }
    
    showApiKeyWarning.value = false
    
    const modelList = await getModelList()
    models.value = modelList
    if (modelList.length > 0 && !selectedModel.value) {
      // 优先选择ernie-x1.1-preview模型
      const preferredModel = modelList.find(m => m.id === 'ernie-x1.1-preview')
      selectedModel.value = preferredModel ? preferredModel.id : modelList[0].id
    }
  } catch (error) {
    console.error('Failed to fetch model list:', error)
    // 如果是认证错误，提示用户检查API密钥
    if (error.message && (error.message.includes('401') || error.message.includes('Unauthorized'))) {
      console.warn('API key may be invalid. Please check your OpenAI API key in settings.')
    }
    message.error('Failed to fetch model list, please check API configuration')
  }
}

// 用于批量更新的缓冲区
let contentBuffer = ''
let updateTimer = null

// 批量更新函数
const flushContentBuffer = () => {
  if (contentBuffer) {
    htmlCode.value += contentBuffer
    contentBuffer = ''
    // 自动滚动到底部
    nextTick(() => {
      const textarea = document.querySelector('.matrix-textarea')
      if (textarea) {
        textarea.scrollTop = textarea.scrollHeight
      }
    })
  }
  updateTimer = null
}

// Generate HTML
const generateHTML = async () => {
  if (!selectedModel.value || !userPrompt.value.trim()) {
    message.warning('Please select a model and enter requirements')
    return
  }

  isGenerating.value = true
  htmlCode.value = ''
  thinkingContent.value = ''
  isStreamingComplete.value = false
  isThinking.value = false
  showThinkingModal.value = false
  

  
  // 清理之前的缓冲区和定时器
  contentBuffer = ''
  if (updateTimer) {
    clearTimeout(updateTimer)
    updateTimer = null
  }

  try {
    // 使用单轮对话生成
    
    await generateHTMLStream({
      model: selectedModel.value,
      prompt: systemPrompt.value + '\n\nUser Requirements: ' + userPrompt.value,
      onContent: (content) => {
        // 将内容添加到缓冲区
        contentBuffer += content
        
        // 如果开始接收内容，说明思考阶段结束，自动关闭thinking浮窗
        if (isThinking.value) {
          isThinking.value = false
          showThinkingModal.value = false
        }
        
        // 使用防抖机制，减少更新频率
        if (updateTimer) {
          clearTimeout(updateTimer)
        }
        updateTimer = setTimeout(flushContentBuffer, 50) // 50ms防抖
      },
      onThinking: (thinking) => {
        thinkingContent.value += thinking
        // 只要有思考内容，就显示思考浮窗
        if (!showThinkingModal.value) {
          showThinkingModal.value = true
          isThinking.value = true
        }
      },
      onComplete: () => {
        // 确保最后的内容被更新
        if (updateTimer) {
          clearTimeout(updateTimer)
          flushContentBuffer()
        }
        isStreamingComplete.value = true
        isThinking.value = false
        
        // 根据对话模式显示不同的完成消息
        message.success('HTML generation completed!')
      },
      onError: (error) => {
        // 清理缓冲区和定时器
        if (updateTimer) {
          clearTimeout(updateTimer)
          flushContentBuffer()
        }
        console.error('Generation failed:', error)
        message.error('Generation failed: ' + error.message)
        isThinking.value = false
      }
    })
  } catch (error) {
    // 清理缓冲区和定时器
    if (updateTimer) {
      clearTimeout(updateTimer)
      flushContentBuffer()
    }
    console.error('HTML generation failed:', error)
    message.error('HTML generation failed: ' + error.message)
    isThinking.value = false
  } finally {
    isGenerating.value = false
  }
}

// Check if it's a thinking model
const checkIsThinkingModel = (modelId) => {
  return isThinkingModel(modelId)
}

// 移除重复的函数声明，使用ref变量showThinkingModal

// Load configuration
const loadConfig = () => {
  try {
    const saved = localStorage.getItem('ernieWebCoder_config')
    if (saved) {
      const config = JSON.parse(saved)
      
      // 检查是否是旧的百度API配置，如果是则清理
      if (config.baseUrl && config.baseUrl.includes('aistudio.baidu.com')) {
        console.log('Detected old Baidu API configuration, clearing...')
        localStorage.removeItem('ernieWebCoder_config')
        // 使用默认的OpenAI配置
        systemPrompt.value = DEFAULT_SYSTEM_PROMPT
        updateApiConfig({
          baseUrl: apiConfig.value.baseUrl,
          apiToken: apiConfig.value.apiToken
        })
        return
      }
      
      apiConfig.value = { ...apiConfig.value, ...config }
      if (config.systemPrompt) {
        systemPrompt.value = config.systemPrompt
      } else {
        systemPrompt.value = DEFAULT_SYSTEM_PROMPT
      }
      updateApiConfig({
        baseUrl: config.baseUrl,
        apiToken: config.apiToken
      })
    } else {
      // 如果没有保存的配置，使用默认的OpenAI配置
      systemPrompt.value = DEFAULT_SYSTEM_PROMPT
      updateApiConfig({
        baseUrl: apiConfig.value.baseUrl,
        apiToken: apiConfig.value.apiToken
      })
    }
  } catch (error) {
    console.error('Failed to load configuration:', error)
    // 出错时也使用默认配置
    systemPrompt.value = DEFAULT_SYSTEM_PROMPT
    updateApiConfig({
      baseUrl: apiConfig.value.baseUrl,
      apiToken: apiConfig.value.apiToken
    })
  }
}

// Handle configuration update
const handleConfigUpdated = (newConfig) => {
  apiConfig.value = { ...newConfig }
  if (newConfig.systemPrompt) {
    systemPrompt.value = newConfig.systemPrompt
  }
  fetchModels()
}

// Clear code
const clearCode = () => {
  htmlCode.value = ''
  thinkingContent.value = ''
  isStreamingComplete.value = false
  message.success('Code cleared')
}

// Download HTML file
const downloadHTML = () => {
  if (!htmlCode.value.trim()) {
    message.warning('No HTML code to download')
    return
  }
  
  const blob = new Blob([htmlCode.value], { type: 'text/html;charset=utf-8' })
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = `generated-page-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.html`
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(url)
  message.success('HTML file downloaded successfully!')
}

// Handle panel resize
const handleMouseDown = (e) => {
  isDragging.value = true
  document.addEventListener('mousemove', handleMouseMove)
  document.addEventListener('mouseup', handleMouseUp)
  e.preventDefault()
}

const handleMouseMove = (e) => {
  if (!isDragging.value) return
  
  const container = document.querySelector('.main-content')
  if (!container) return
  
  const rect = container.getBoundingClientRect()
  const percentage = ((e.clientX - rect.left) / rect.width) * 100
  
  // Limit between 20% and 80%
  leftPanelWidth.value = Math.max(20, Math.min(80, percentage))
}

const handleMouseUp = () => {
  isDragging.value = false
  document.removeEventListener('mousemove', handleMouseMove)
  document.removeEventListener('mouseup', handleMouseUp)
}

// Force clear old configuration
const clearOldConfig = () => {
  try {
    // 清理所有可能的旧配置键
    const keysToRemove = [
      'ernieWebCoder_config',
      'ernie_web_coder_config', 
      'baidu_api_config',
      'api_config'
    ]
    
    keysToRemove.forEach(key => {
      if (localStorage.getItem(key)) {
        console.log(`Removing old config: ${key}`)
        localStorage.removeItem(key)
      }
    })
    
    // 检查是否有包含百度API的配置
    for (let i = 0; i < localStorage.length; i++) {
      const key = localStorage.key(i)
      const value = localStorage.getItem(key)
      if (value && value.includes('aistudio.baidu.com')) {
        console.log(`Removing config with Baidu API: ${key}`)
        localStorage.removeItem(key)
      }
    }
  } catch (error) {
    console.error('Error clearing old config:', error)
  }
}

// Load configuration and fetch models on component mount
onMounted(() => {
  clearOldConfig()
  loadConfig()
  fetchModels()
})
</script>

<template>
  <div class="matrix-container">
    <MatrixBackground />
    
    <!-- Header -->
    <div class="header">
      <div class="header-title">
        <h1 class="app-title">ERNIE-WEB-Coder</h1>
        <p class="app-subtitle">AI-Powered HTML Code Generator</p>
      </div>
      
      <div class="header-actions">
        <Button 
          @click="showConfig = true"
          class="config-btn"
          size="small"
          :icon="h(SettingOutlined)"
        >
          Settings
        </Button>
        <Button 
          v-if="checkIsThinkingModel(selectedModel) && thinkingContent" 
          @click="showThinkingModal = true"
          class="thinking-btn"
          size="small"
        >
          View Thinking Process
        </Button>
      </div>
    </div>
    
    <!-- Configuration Panel -->
    <div class="config-panel">
      <!-- API Key Warning -->
      <div v-if="showApiKeyWarning" class="api-warning">
        <div class="warning-content">
          <span class="warning-icon">⚠️</span>
          <span class="warning-text">Please configure your OpenAI API key in Settings to use the model list and generation features.</span>
          <Button @click="showConfig = true" type="link" size="small" class="warning-action">Configure Now</Button>
        </div>
      </div>
      
      <div class="config-grid">
        <!-- Generation Options Section -->
        <div class="config-section generation-section">
          <div class="section-header">
            <span class="section-icon">🔄</span>
            <label class="matrix-label">Generation Mode</label>
          </div>
          
          <!-- Model Selection (Primary) -->
          <div class="model-selection-primary">
            <div class="model-header">
              <span class="model-icon">🤖</span>
              <label class="model-label">AI Model</label>
            </div>
            <Select 
              v-model:value="selectedModel" 
              class="matrix-select"
              placeholder="Choose your AI model"
              :options="models.map(m => ({ value: m.id, label: m.name || m.id }))"
            />

          </div>
          

        </div>

        <!-- Requirements Section -->
        <div class="config-section requirements-section">
          <div class="section-header">
            <span class="section-icon">📝</span>
            <label class="matrix-label">Project Requirements</label>
          </div>
          <Input.TextArea 
            v-model:value="userPrompt" 
            class="matrix-input requirements-input"
            :rows="4"
            placeholder="Describe your vision: What kind of HTML page do you want to create? Include details about layout, features, styling preferences, and any specific functionality you need..."
            @keydown.ctrl.enter="generateHTML"
          />
          <div class="input-footer">
            <span class="char-count">{{ userPrompt.length }} characters</span>
            <span class="shortcut-hint">Ctrl+Enter to generate</span>
          </div>
          
          <!-- Action Buttons -->
          <div class="requirements-actions">
            <Button 
              @click="generateHTML" 
              class="matrix-btn generate-btn"
              type="primary"
              :loading="isGenerating"
              :disabled="!selectedModel || !userPrompt.trim()"
              size="large"
            >
              <span class="btn-icon">{{ isGenerating ? '⚡' : '🚀' }}</span>
              {{ isGenerating ? 'Generating Code...' : 'Generate Code' }}
            </Button>
            <Button 
              @click="clearCode" 
              class="clear-btn"
              :disabled="!htmlCode"
              size="large"
            >
              <span class="btn-icon">🗑️</span>
              Clear Code
            </Button>
          </div>
        </div>
      </div>
    </div>

    <!-- Main Content Area -->
    <div class="main-content">
      <!-- Left Code Editor -->
      <div class="code-panel" :style="{ width: leftPanelWidth + '%' }">
        <div class="panel-header">
          <span class="matrix-text">Generated HTML Code</span>
          <div class="code-stats">
            <span class="stat-item">{{ htmlCode.length }} characters</span>
            <span class="stat-item">{{ htmlCode.split('\n').length }} lines</span>
          </div>
          <div class="status-indicator" :class="{ active: isGenerating }">
            <Spin v-if="isGenerating" size="small" />
            <span v-else-if="isStreamingComplete" class="complete-indicator">✓</span>
          </div>
        </div>
        <div class="code-content">
          <textarea 
            v-model="htmlCode" 
            class="matrix-textarea"
            placeholder="// Waiting for HTML code generation..."
            readonly
          ></textarea>
        </div>
      </div>

      <!-- Resizer -->
      <div 
        class="panel-resizer" 
        @mousedown="handleMouseDown"
        :class="{ 'dragging': isDragging }"
      >
        <div class="resizer-line"></div>
      </div>

      <!-- Right Preview Area -->
      <div class="preview-panel" :style="{ width: (100 - leftPanelWidth) + '%' }">
        <div class="panel-header">
          <span class="matrix-text">Live Preview</span>
          <Button 
            @click="downloadHTML"
            class="download-btn"
            size="small"
            :disabled="!htmlCode.trim()"
            :icon="h(DownloadOutlined)"
            title="Download HTML File"
          >
            Download
          </Button>
        </div>
        <div class="preview-container">
          <iframe 
            v-if="htmlCode"
            :srcdoc="htmlCode"
            class="preview-frame"
            sandbox="allow-scripts allow-same-origin"
          ></iframe>
          <div v-else class="preview-placeholder">
            <p>Waiting for HTML code generation...</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Thinking Process Modal -->
    <ThinkingModal 
      v-model:visible="showThinkingModal"
      :thinking-content="thinkingContent"
      :is-thinking="isThinking"
      :auto-close="true"
      :auto-close-delay="3000"
      @close="showThinkingModal = false"
    />

    <!-- 配置弹窗 -->
    <ConfigModal 
      v-model="showConfig"
      :config="apiConfig"
      @config-updated="handleConfigUpdated"
    />
  </div>
</template>

<style scoped>
/* 黑客帝国风格样式 */
.matrix-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #000000 0%, #001100 50%, #000000 100%);
  color: #00ff00;
  font-family: 'Courier New', monospace;
  overflow: hidden;
  position: relative;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.9);
  border-bottom: 2px solid #00ff00;
  backdrop-filter: blur(10px);
}

.header-title {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.app-title {
  color: #00ff00;
  font-size: 28px;
  font-weight: bold;
  text-shadow: 0 0 15px #00ff00;
  margin: 0;
  font-family: 'Courier New', monospace;
}

.app-subtitle {
  color: rgba(0, 255, 0, 0.7);
  font-size: 14px;
  margin: 0;
  font-style: italic;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.config-panel {
  padding: 25px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(0, 20, 0, 0.9));
  border-bottom: 2px solid #00ff00;
  backdrop-filter: blur(10px);
}

.config-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 30px;
  margin-bottom: 25px;
}

.config-section {
  background: rgba(0, 255, 0, 0.05);
  border: 1px solid rgba(0, 255, 0, 0.3);
  border-radius: 8px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.config-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.1), transparent);
  animation: scan 4s linear infinite;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 255, 0, 0.3);
}

.section-icon {
  font-size: 20px;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.8;
}

.model-section {
  border-left: 3px solid #00ff00;
}

.requirements-section {
  border-left: 3px solid #00cc00;
}

.requirements-input {
  min-height: 100px !important;
}

.input-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(0, 255, 0, 0.6);
}

.char-count {
  background: rgba(0, 255, 0, 0.1);
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid rgba(0, 255, 0, 0.2);
}

.shortcut-hint {
  font-style: italic;
  opacity: 0.8;
}

.requirements-actions {
  display: flex;
  gap: 15px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(0, 255, 0, 0.2);
  justify-content: flex-end;
}

.requirements-actions .matrix-btn,
.requirements-actions .clear-btn {
  min-width: 140px;
  height: 40px;
  font-size: 14px;
}

.action-bar {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  border-top: 1px solid rgba(0, 255, 0, 0.2);
  background: rgba(0, 255, 0, 0.02);
}

.action-buttons {
  display: flex;
  gap: 20px;
  align-items: center;
}

.generate-btn {
  min-width: 200px;
  height: 50px;
  font-size: 16px;
  font-weight: bold;
}

.btn-icon {
  margin-right: 8px;
  font-size: 18px;
}

@media (max-width: 768px) {
  .config-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 15px;
  }
  
  .generate-btn {
    width: 100%;
  }
}

.matrix-label {
  color: #00ff00;
  font-weight: bold;
  text-shadow: 0 0 10px #00ff00;
  white-space: nowrap;
}

.matrix-select {
  min-width: 200px;
}

.matrix-select :deep(.ant-select-selector) {
  background: rgba(0, 0, 0, 0.9) !important;
  border: 1px solid #00ff00 !important;
  color: #00ff00 !important;
  font-family: 'Courier New', monospace !important;
  font-weight: bold !important;
  text-shadow: 0 0 5px #00ff00 !important;
  transition: all 0.3s ease !important;
  box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.1) !important;
}

.matrix-select :deep(.ant-select-selector:hover) {
  border-color: #00cc00 !important;
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.4), inset 0 0 15px rgba(0, 255, 0, 0.2) !important;
  transform: translateY(-1px) !important;
}

.matrix-select :deep(.ant-select-focused .ant-select-selector) {
  border-color: #00ff00 !important;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.6), inset 0 0 20px rgba(0, 255, 0, 0.3) !important;
}

.matrix-select :deep(.ant-select-selection-item) {
  color: #00ff00 !important;
  font-family: 'Courier New', monospace !important;
  font-weight: bold !important;
  text-shadow: 0 0 5px #00ff00 !important;
}

.matrix-select :deep(.ant-select-selection-placeholder) {
  color: rgba(0, 255, 0, 0.5) !important;
  font-family: 'Courier New', monospace !important;
}

.matrix-select :deep(.ant-select-arrow) {
  color: #00ff00 !important;
  font-size: 14px !important;
}

.matrix-select :deep(.ant-select-arrow:hover) {
  color: #00cc00 !important;
}

/* 下拉框样式 */
.matrix-select :deep(.ant-select-dropdown) {
  background: rgba(0, 0, 0, 0.95) !important;
  border: 1px solid #00ff00 !important;
  box-shadow: 0 0 30px rgba(0, 255, 0, 0.5) !important;
  backdrop-filter: blur(10px) !important;
}

.matrix-select :deep(.ant-select-item) {
  color: #00ff00 !important;
  background: transparent !important;
  font-family: 'Courier New', monospace !important;
  font-weight: bold !important;
  border-bottom: 1px solid rgba(0, 255, 0, 0.1) !important;
  transition: all 0.2s ease !important;
}

.matrix-select :deep(.ant-select-item:hover) {
  background: rgba(0, 255, 0, 0.1) !important;
  color: #00cc00 !important;
  text-shadow: 0 0 8px #00ff00 !important;
  transform: translateX(5px) !important;
}

.matrix-select :deep(.ant-select-item-option-selected) {
  background: rgba(0, 255, 0, 0.2) !important;
  color: #00ff00 !important;
  text-shadow: 0 0 10px #00ff00 !important;
  font-weight: bold !important;
}

.matrix-select :deep(.ant-select-item-option-active) {
  background: rgba(0, 255, 0, 0.15) !important;
  color: #00cc00 !important;
}

.matrix-input {
  flex: 1;
  position: relative;
}

.matrix-input :deep(.ant-input) {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(0, 20, 0, 0.9)) !important;
  border: 2px solid #00ff00 !important;
  color: #00ff00 !important;
  font-family: 'Courier New', monospace !important;
  font-weight: bold !important;
  text-shadow: 0 0 5px #00ff00 !important;
  transition: all 0.4s ease !important;
  box-shadow: 
    inset 0 0 10px rgba(0, 255, 0, 0.1),
    0 0 5px rgba(0, 255, 0, 0.2) !important;
  position: relative;
  overflow: hidden;
}

.matrix-input :deep(.ant-input::before) {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.2), transparent);
  transition: left 0.6s ease;
  z-index: 1;
}

.matrix-input :deep(.ant-input:hover) {
  border-color: #00cc00 !important;
  box-shadow: 
    0 0 20px rgba(0, 255, 0, 0.4),
    inset 0 0 15px rgba(0, 255, 0, 0.2),
    0 0 40px rgba(0, 255, 0, 0.1) !important;
  transform: translateY(-2px) !important;
}

.matrix-input :deep(.ant-input:hover::before) {
  left: 100%;
}

.matrix-input :deep(.ant-input:focus) {
  border-color: #00ff00 !important;
  box-shadow: 
    0 0 30px rgba(0, 255, 0, 0.6),
    inset 0 0 20px rgba(0, 255, 0, 0.3),
    0 0 60px rgba(0, 255, 0, 0.2) !important;
  outline: none !important;
  transform: translateY(-3px) !important;
  animation: matrix-pulse 2s infinite alternate;
}

.matrix-input :deep(.ant-input::placeholder) {
  color: rgba(0, 255, 0, 0.5) !important;
  font-family: 'Courier New', monospace !important;
  font-style: italic !important;
}

/* Requirements输入框特殊样式 */
.requirements-input {
  position: relative;
}

.requirements-input :deep(.ant-input) {
  background: 
    linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(0, 30, 0, 0.9)),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(0, 255, 0, 0.03) 2px,
      rgba(0, 255, 0, 0.03) 4px
    ) !important;
  border: 2px solid #00ff00 !important;
  border-radius: 8px !important;
  padding: 15px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  resize: vertical !important;
  min-height: 120px !important;
}

.requirements-input :deep(.ant-input:focus) {
  animation: matrix-scan 3s infinite linear, matrix-glow 2s infinite alternate !important;
}

.requirements-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(
      0deg,
      transparent 0%,
      rgba(0, 255, 0, 0.1) 50%,
      transparent 100%
    );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.requirements-input:hover::before {
  opacity: 1;
  animation: scan-vertical 2s linear infinite;
}

@keyframes matrix-pulse {
  0% {
    box-shadow: 
      0 0 30px rgba(0, 255, 0, 0.6),
      inset 0 0 20px rgba(0, 255, 0, 0.3),
      0 0 60px rgba(0, 255, 0, 0.2);
  }
  100% {
    box-shadow: 
      0 0 40px rgba(0, 255, 0, 0.8),
      inset 0 0 25px rgba(0, 255, 0, 0.4),
      0 0 80px rgba(0, 255, 0, 0.3);
  }
}

@keyframes matrix-scan {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

@keyframes matrix-glow {
  0% {
    text-shadow: 0 0 5px #00ff00;
  }
  100% {
    text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;
  }
}

@keyframes scan-vertical {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

.matrix-btn {
  background: rgba(0, 0, 0, 0.9) !important;
  border: 1px solid #00ff00 !important;
  color: #00ff00 !important;
  font-family: 'Courier New', monospace !important;
  font-weight: bold !important;
  text-shadow: 0 0 5px #00ff00 !important;
  transition: all 0.3s ease !important;
  box-shadow: inset 0 0 5px rgba(0, 255, 0, 0.1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.matrix-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.2), transparent);
  transition: left 0.5s ease;
}

.matrix-btn:hover {
  background: rgba(0, 255, 0, 0.1) !important;
  border-color: #00cc00 !important;
  color: #00cc00 !important;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.4), inset 0 0 10px rgba(0, 255, 0, 0.2) !important;
  transform: translateY(-2px) !important;
}

.matrix-btn:hover::before {
  left: 100%;
}

.matrix-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.3), inset 0 0 15px rgba(0, 255, 0, 0.3) !important;
}

.config-btn {
  background: rgba(0, 0, 0, 0.9) !important;
  border: 1px solid #00ff00 !important;
  color: #00ff00 !important;
  font-family: 'Courier New', monospace !important;
  font-weight: bold !important;
  text-shadow: 0 0 5px #00ff00 !important;
  margin-right: 15px;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.config-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.3), transparent);
  transition: left 0.4s ease;
}

.config-btn:hover {
  background: rgba(0, 255, 0, 0.1) !important;
  border-color: #00cc00 !important;
  color: #00cc00 !important;
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.4) !important;
  transform: scale(1.05) !important;
}

.config-btn:hover::before {
  left: 100%;
}

.thinking-btn {
  background: rgba(255, 102, 0, 0.9) !important;
  border: 1px solid #ff6600 !important;
  color: #000 !important;
  font-family: 'Courier New', monospace !important;
  font-weight: bold !important;
  text-shadow: 0 0 3px #ff6600 !important;
  animation: pulse 2s infinite;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.thinking-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.4s ease;
}

.thinking-btn:hover::before {
  left: 100%;
}

.thinking-btn:hover {
  background: rgba(255, 102, 0, 1) !important;
  box-shadow: 0 0 20px rgba(255, 102, 0, 0.6) !important;
  transform: scale(1.05) !important;
}

.clear-btn {
  background: rgba(255, 0, 0, 0.1) !important;
  border: 1px solid #ff4444 !important;
  color: #ff4444 !important;
  font-family: 'Courier New', monospace !important;
  font-weight: bold !important;
  text-shadow: 0 0 3px #ff4444 !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.clear-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 68, 68, 0.3), transparent);
  transition: left 0.4s ease;
}

.clear-btn:hover {
  background: rgba(255, 0, 0, 0.2) !important;
  border-color: #ff6666 !important;
  color: #ff6666 !important;
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.4) !important;
  transform: translateY(-2px) !important;
}

.clear-btn:hover::before {
  left: 100%;
}

.main-content {
  display: flex;
  height: calc(100vh - 200px);
  position: relative;
  user-select: none;
}

.code-panel, .preview-panel {
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid #00ff00;
  display: flex;
  flex-direction: column;
  min-width: 200px;
}

.panel-resizer {
  width: 6px;
  background: rgba(0, 255, 0, 0.2);
  cursor: col-resize;
  position: relative;
  border-left: 1px solid rgba(0, 255, 0, 0.3);
  border-right: 1px solid rgba(0, 255, 0, 0.3);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-resizer:hover {
  background: rgba(0, 255, 0, 0.4);
  border-left: 1px solid rgba(0, 255, 0, 0.6);
  border-right: 1px solid rgba(0, 255, 0, 0.6);
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
}

.panel-resizer.dragging {
  background: rgba(0, 255, 0, 0.6);
  border-left: 1px solid #00ff00;
  border-right: 1px solid #00ff00;
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
}

.resizer-line {
  width: 2px;
  height: 30px;
  background: linear-gradient(to bottom, transparent, #00ff00, transparent);
  border-radius: 1px;
  opacity: 0.7;
  transition: all 0.2s ease;
}

.panel-resizer:hover .resizer-line {
  opacity: 1;
  height: 40px;
  box-shadow: 0 0 8px #00ff00;
}

.panel-resizer.dragging .resizer-line {
  opacity: 1;
  height: 50px;
  box-shadow: 0 0 12px #00ff00;
  animation: pulse 0.5s infinite alternate;
}

.panel-header {
  background: linear-gradient(135deg, rgba(0, 255, 0, 0.1), rgba(0, 255, 0, 0.05));
  padding: 12px 15px;
  border-bottom: 1px solid #00ff00;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

.panel-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.1), transparent);
  animation: scan 3s linear infinite;
}

@keyframes scan {
  0% { left: -100%; }
  100% { left: 100%; }
}

.matrix-text {
  color: #00ff00;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 10px #00ff00;
  position: relative;
  z-index: 1;
}

.code-stats {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #00ff00;
  opacity: 0.7;
}

.stat-item {
  background: rgba(0, 255, 0, 0.1);
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid rgba(0, 255, 0, 0.3);
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
}

.complete-indicator {
  color: #00ff00;
  font-weight: bold;
  text-shadow: 0 0 5px #00ff00;
}

.code-content {
  flex: 1;
  overflow: auto;
  padding: 15px;
}

.preview-container {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.preview-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: white;
}

.preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(0, 255, 0, 0.6);
  font-style: italic;
  text-align: center;
  position: relative;
  background: radial-gradient(circle at center, rgba(0, 255, 0, 0.02), transparent);
}

.placeholder-text {
  font-size: 18px;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  text-shadow: 0 0 15px rgba(0, 255, 0, 0.4);
  animation: glow 2s ease-in-out infinite alternate;
  position: relative;
  z-index: 1;
}

.preview-placeholder::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  border: 1px solid rgba(0, 255, 0, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: rotate 10s linear infinite;
}

.preview-placeholder::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(0, 255, 0, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: rotate 15s linear infinite reverse;
}

@keyframes rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.thinking-modal :deep(.ant-modal-content) {
  background: rgba(0, 0, 0, 0.95);
  border: 2px solid #00ff00;
}

.thinking-modal :deep(.ant-modal-header) {
  background: rgba(0, 255, 0, 0.1);
  border-bottom: 1px solid #00ff00;
}

.thinking-modal :deep(.ant-modal-title) {
  color: #00ff00;
  text-shadow: 0 0 10px #00ff00;
}

.thinking-content {
  max-height: 400px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.8);
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #00ff00;
}

.thinking-content pre {
  color: #00ff00;
  font-family: 'Courier New', monospace;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  text-shadow: 0 0 5px #00ff00;
}

/* 动画效果 */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}



@keyframes glow {
  0%, 100% { text-shadow: 0 0 5px #00ff00; }
  50% { text-shadow: 0 0 20px #00ff00, 0 0 30px #00ff00; }
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb {
  background: #00ff00;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #00cc00;
}

/* API警告样式 */
.api-warning {
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

.warning-content {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffc107;
}

.warning-icon {
  font-size: 18px;
}

.warning-text {
  flex: 1;
  font-size: 14px;
  text-shadow: 0 0 5px rgba(255, 193, 7, 0.3);
}

.warning-action {
  color: #ffc107 !important;
  text-shadow: 0 0 5px rgba(255, 193, 7, 0.3);
}

.warning-action:hover {
  color: #ffeb3b !important;
  text-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
}

/* Matrix Textarea 样式 */
.matrix-textarea {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(0, 20, 0, 0.9)) !important;
  border: 2px solid #00ff00 !important;
  color: #00ff00 !important;
  font-family: 'Courier New', monospace !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-weight: bold !important;
  text-shadow: 0 0 5px #00ff00 !important;
  padding: 15px !important;
  resize: none !important;
  outline: none !important;
  box-shadow: 
    inset 0 0 10px rgba(0, 255, 0, 0.1),
    0 0 5px rgba(0, 255, 0, 0.2) !important;
  transition: all 0.3s ease !important;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-y: auto;
  position: relative;
}

.matrix-textarea::placeholder {
  color: rgba(0, 255, 0, 0.5) !important;
  font-family: 'Courier New', monospace !important;
  font-style: italic !important;
}

.matrix-textarea:hover {
  border-color: #00cc00 !important;
  box-shadow: 
    0 0 20px rgba(0, 255, 0, 0.4),
    inset 0 0 15px rgba(0, 255, 0, 0.2),
    0 0 40px rgba(0, 255, 0, 0.1) !important;
}

.matrix-textarea:focus {
  border-color: #00ff00 !important;
  box-shadow: 
    0 0 30px rgba(0, 255, 0, 0.6),
    inset 0 0 20px rgba(0, 255, 0, 0.3),
    0 0 60px rgba(0, 255, 0, 0.2) !important;
  animation: matrix-pulse 2s infinite alternate;
}

/* 滚动条样式 */
.matrix-textarea::-webkit-scrollbar {
  width: 8px;
}

.matrix-textarea::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.5);
}

.matrix-textarea::-webkit-scrollbar-thumb {
  background: #00ff00;
  border-radius: 4px;
}

.matrix-textarea::-webkit-scrollbar-thumb:hover {
  background: #00cc00;
}

.status-badge {
  background: rgba(0, 255, 0, 0.2);
  color: #00ff00;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
}

.status-text {
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
}

.status-text.completed {
  color: #00ff00;
}

.status-text.continuing {
  color: #ffaa00;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* 主要模型选择样式 */
.model-selection-primary {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 255, 0, 0.2);
}

.model-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.model-icon {
  font-size: 16px;
}

.model-label {
  color: #00ff00;
  font-weight: bold;
  font-size: 14px;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
}

.model-selection-primary .matrix-select {
  margin-bottom: 10px;
  width: 100%;
}


.generation-section {
  border: 2px solid rgba(0, 255, 0, 0.3);
  background: rgba(0, 255, 0, 0.02);
}

.generation-section .section-header {
  color: #00ff00;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.4);
}

/* Download button styles */
.download-btn {
  background: linear-gradient(135deg, rgba(0, 255, 0, 0.1), rgba(0, 255, 0, 0.05)) !important;
  border: 1px solid #00ff00 !important;
  color: #00ff00 !important;
  font-family: 'Courier New', monospace !important;
  font-weight: bold !important;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.3) !important;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.2) !important;
  transition: all 0.3s ease !important;
  position: relative;
  z-index: 1;
}

.download-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(0, 255, 0, 0.2), rgba(0, 255, 0, 0.1)) !important;
  border-color: #00cc00 !important;
  color: #00cc00 !important;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.4) !important;
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.5) !important;
  transform: translateY(-1px);
}

.download-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.3) !important;
}

.download-btn:disabled {
  background: rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(0, 255, 0, 0.3) !important;
  color: rgba(0, 255, 0, 0.3) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: not-allowed;
}

.download-btn .anticon {
  color: inherit !important;
  text-shadow: inherit !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .toolbar {
    flex-direction: column;
    gap: 15px;
  }
  
  .main-content {
    flex-direction: column;
    height: auto;
  }
  
  .code-panel, .preview-panel {
    height: 400px;
  }
  
  .generation-options {
    margin: 15px 0;
    padding: 12px;
  }
  
  .option-label {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .option-desc {
    margin-left: 0;
  }
}
</style>
